<!-- 密码登录 -->
<template>
	<uv-form :model="ruleForm" :rules="rules" ref="form">
		<uv-form-item class="mb-40" prop="phonenumber" :borderBottom="false">
			<uv-input v-model="ruleForm.phonenumber" border="none" placeholder="请输入手机号">
				<template #prefix>
					<Icon name="phone-fill" size="40rpx" />
				</template>
			</uv-input>
		</uv-form-item>
		
		<uv-form-item class="mb-20" prop="passwdorvercode" :borderBottom="false">
			<uv-input v-model="ruleForm.passwdorvercode" border="none" placeholder="请输入密码" type="password" maxlength="6">
				<template #prefix>
					<Icon name="empty-permission" size="40rpx" />
				</template>
			</uv-input>
		
		</uv-form-item>
	</uv-form>
</template>

<script setup>
import { reactive, defineEmits, ref, defineExpose } from 'vue'
import Icon from '@/components/Icon/index.vue'
import Code from '@/components/Code/index.vue'
import { valiteMobile } from '@/utils/format'

const emits = defineEmits(['ruleForm'])

const form = ref(null)

const ruleForm = reactive({
	phonenumber: '13710080529',
	logintype: 1,
	passwdorvercode : '654321'
})

const rules = reactive({
	phonenumber: [
		{ required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
		{ 
			validator: (rule, value, callback) => {
				return valiteMobile(ruleForm.phonenumber)
			},
			message: '手机格式错误，请重新输入',
			trigger: ['blur', 'change']
		}
	],
	passwdorvercode: [
		{ required: true, message: '请输入密码', trigger: ['blur'] }
	]
})

// 提交
const submit = () => {
	form.value.validate().then(res => {
		emits('ruleForm', ruleForm)
	}).catch(err => {
		
	})
}

defineExpose({
	submit
})
</script>

<style lang="scss" scoped>
@import '@/static/scss/form.scss';
</style>